<template>
  <div class="record">
    <div class="tip">
      <p>{{text[type-1]}}</p>
      <div style="text-align: center;">
        <i v-show="type>1" style="vertical-align: middle">
           <img src="/fengshui/static/pic/icon/voice_line.png"></i>
        <p v-show="type==2||type==3" style="display: inline-block;vertical-align: middle;color: dodgerblue;">{{recordTime}}s/60s </p>
        <p v-show="type==4" style="display: inline-block;vertical-align: middle;color: dodgerblue;">{{listenTime}}s/{{recordTime}}s </p>
        <i v-show="type>1" style="vertical-align: middle">
           <img src="/fengshui/static/pic/icon/voice_line.png"></i>
      </div>
    </div>

    <div class="control">
      <div class="ready" v-show="type==1" @click="startRecord">
        <div class="big-circle"></div>
        <div class="small-circle"></div>

      </div>
      <div class="recording" v-show="type==2" @click="stopRecord">
        <div class="record-bg-circle bg-animation"></div>
        <div class="record-big-circle"></div>
        <div class="record-small-circle"></div>
      </div>
      <div class="test" v-show="type==3" @click="startListen">
        <div class="test-big-circle">
          <p>试听</p>
        </div>
        <div class="record-small-circle"></div>
      </div>
      <div class="recording" v-show="type==4" @click="stopListen">
        <div class="record-bg-circle bg-animation"></div>
        <div class="record-big-circle"></div>
        <div class="record-small-circle"></div>
      </div>
      <div class="re-start" v-show="type>2" @click="restart"><span>重录</span></div>
    </div>
    <button @click="uploadRecord" class="submit">写好了</button>
  </div>


</template>
<script>
    import {
        recordInterfaces,
    } from '../js/config.js'
    export default {
        props: ["id", 'question_id', 'professor_id'],
        created() {

        },
        data() {
            return {
                type: 1,
                text: ['点击录音您的答案', '录音中', '录音完成', '试听中'],
                recordTime: 0,
                timeLimit: 60,
                localId: '',
                isCountrecordTime: false,
                listenTime: 0,
                isCountlistenTime: false,
                debug: []

            }
        },
        methods: {
            startRecord: function() {
                let vm = this;
                //开始录制

                vm.debug.push("开始录制");
                // 开始录制
                vm.wx.startRecord({
                    cancel: function() {
                        alert('用户拒绝授权录音');
                    },
                    success: function() {
                        vm.isCountrecordTime = true;
                        vm.recordTime = 0;
                        vm.type = 2;
                        let countRecordTimer = setInterval(function() {
                                vm.recordTime++;
                                if (!vm.isCountrecordTime) {
                                    clearInterval(countRecordTimer);
                                }
                            }, 1000)
                            //成功开始录制
                        vm.wx.onVoiceRecordEnd({
                            // 录音时间超过一分钟没有停止的时候会执行 complete 回调
                            complete: function(res) {
                                alert('录音时间最多一分钟');
                                vm.debug.push("auto record end");
                                vm.localId = res.localId;
                                vm.isCountrecordTime = false;
                                vm.type = 3;
                            }
                        });
                        //录制时间计时

                    }
                });
            },
            stopRecord: function() {
                let vm = this;
                vm.debug.push("停止录制");
                //停止录音
                vm.wx.stopRecord({
                    success: function(res) {
                        vm.localId = res.localId;
                        vm.isCountrecordTime = false;
                        vm.type = 3;
                        //停止计时
                    },
                    fail: function(res) {
                        alert("停止录制失败");
                        vm.restart();
                    }
                });

            },
            startListen: function() {
                let vm = this;
                vm.debug.push("点击试听");
                // alert(vm.localId);
                vm.wx.playVoice({
                    localId: vm.localId,
                    success: function(res) {
                        //试听时间计时
                        vm.type = 4;
                        vm.isCountlistenTime = true;
                        vm.listenTime = 0;
                        let countListenTimer = setInterval(function() {
                            vm.listenTime++;
                            if (!vm.isCountlistenTime) {
                                clearInterval(countListenTimer);
                            }
                        }, 1000)
                        vm.wx.onVoicePlayEnd({
                            success: function(res) {
                                vm.debug.push("试听结束");
                                vm.localId = res.localId; // 返回音频的本地ID
                                console.log(vm.localId);
                                if (vm.type == 4) {
                                    vm.type = 3;
                                }
                                vm.isCountlistenTime = false;
                            },
                            fail: function(res) {
                                // vm.type = 3;
                                alert("试听结束失败!");
                                vm.restart();
                            }
                        });
                    },
                    fail: function(res) {
                        alert("播放失败，请重新录制");
                        vm.restart();
                    }
                });



            },
            stopListen: function() {
                let vm = this;
                // wx.pauseVoice({
                //     localId: '' // 需要暂停的音频的本地ID，由stopRecord接口获得
                // });
                //状态取消试听
                // alert("asd" + vm.localId);
                // 停止播放
                vm.debug.push("取消试听");
                vm.wx.stopVoice({
                    localId: vm.localId,
                    success: function(res) {
                        //停止计时
                        vm.isCountlistenTime = false;
                        //试听计时重置
                        vm.listenTime = 0;
                        vm.type = 3;
                    },
                    fail: function(res) {
                        alert('停止是试听失败');
                    }
                });

                return;

            },
            restart: function() {
                this.debug.push("重新开始");
                //删除录音文件
                this.type = 1;
                this.localId = '';
                this.isCountlistenTime = false;
                this.listenTime = 0;
                this.isCountrecordTime = false;

            },
            uploadRecord: function() {
                let vm = this;
                vm.wx.uploadVoice({
                    localId: this.localId, // 需要上传的音频的本地ID，由stopRecord接口获得
                    isShowProgressTips: 1, // 默认为1，显示进度提示
                    success: function(res) {
                        var serverId = res.serverId; // 返回音频的服务器端ID
                        vm.serverId = res.serverId;
                        let params = {
                            do: 'saveAnswerAudio',
                            serverId: serverId,
                            question_id: 123456,
                            professor_id: 765442
                        };
                        vm.$http.get(vm.url.acid, {
                            params: params
                        }).then(response => {
                            // get body data
                            vm.debug = JSON.stringify(response.body)
                                // alert();
                        }, response => {
                            // error callback
                        });
                        // alert("上传成功serverid=" + serverId);
                    }
                });
            }
        }
    }
</script>
<style scoped>
    .record {
        width: 100%;
        text-align: center;
    }
    
    i,
    img {
        display: inline-block;
        height: 1.25rem;
    }
    
    .tip p {
        text-align: center;
        font-size: .8rem;
        color: #999;
    }
    
    .control {
        /*background: whitesmoke;*/
        height: 6rem;
        position: relative;
    }
    
    .ready .big-circle {
        position: absolute;
        /* background-color: orangered; */
        width: 4rem;
        height: 4rem;
        border-radius: 10rem;
        border: .1rem solid #999;
        /* padding: .5rem; */
        left: 50%;
        margin: -2rem;
        top: 50%;
        box-sizing: border-box;
    }
    
    .ready .small-circle {
        box-sizing: border-box;
        position: absolute;
        background-color: orangered;
        width: 3rem;
        height: 3rem;
        border-radius: 4rem;
        /* border: .1rem solid #999; */
        /* padding: .5rem; */
        left: 50%;
        margin-left: -1.5rem;
        top: 50%;
        margin-top: -1.5rem;
    }
    
    .recording .record-big-circle {
        position: absolute;
        background-color: #fff;
        width: 4rem;
        height: 4rem;
        border-radius: 10rem;
        /*border: .1rem solid #999;*/
        /* padding: .5rem; */
        left: 50%;
        margin-left: -2rem;
        top: 50%;
        margin-top: -2rem;
        box-sizing: border-box;
    }
    
    .recording .record-small-circle {
        box-sizing: border-box;
        position: absolute;
        background-color: orangered;
        width: 2rem;
        height: 2rem;
        border-radius: .4rem;
        /* border: .1rem solid #999; */
        /* padding: .5rem; */
        left: 50%;
        margin-left: -1rem;
        top: 50%;
        margin-top: -1rem;
    }
    
    .recording .record-bg-circle {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: absolute;
        border-radius: 4rem;
        width: 3.8rem;
        height: 3.8rem;
        background: dodgerblue;
        opacity: 0.4;
        left: 50%;
        margin: -1.9rem;
        top: 50%;
        animation: bg-animation 1.5s linear infinite alternate;
        -webkit-animation: bg-animation 1.5s linear infinite alternate;
    }
    
    .test .test-big-circle {
        position: absolute;
        width: 4rem;
        height: 4rem;
        border-radius: 10rem;
        background: dodgerblue;
        opacity: 0.9;
        left: 50%;
        margin: -2rem;
        top: 50%;
        box-sizing: border-box;
        vertical-align: middle;
        text-align: center;
    }
    
    .test .test-big-circle p {
        line-height: 4rem;
        color: white;
        font-size: 1rem;
    }
    
    .re-start {
        position: absolute;
        font-size: 0.6rem;
        padding: 0.2rem;
        left: 50%;
        top: 50%;
        margin-left: 2.5rem;
        margin-top: .5rem;
    }
    
    .re-start span {
        padding: .2rem .5rem;
        border: 1px solid #999;
        border-radius: 2rem;
        color: #999;
    }
    
    .submit {
        width: 80%;
        border-radius: 100px;
        border: none;
        padding: .4rem;
        color: white;
        background-color: dodgerblue;
        margin: 1rem auto;
    }
    
    @keyframes bg-animation {
        0% {
            transform: scale(1, 1)
        }
        100% {
            transform: scale(1.3, 1.3)
        }
    }
</style>